<template>
    <router-link :to="to" class="tool-card">
      <div class="tool-icon">
        <i :class="icon"></i>
      </div>
      <div class="tool-info">
        <h3 class="tool-title">{{ title }}</h3>
        <p class="tool-desc">{{ description }}</p>
      </div>
      <div class="tool-meta">
        <span class="tool-status" :class="status">{{ statusText }}</span>
        <i class="fas fa-chevron-right arrow-icon"></i>
      </div>
    </router-link>
  </template>
  
  <script>
  export default {
    name: 'ToolCard',
    props: {
      title: {
        type: String,
        required: true
      },
      description: {
        type: String,
        required: true
      },
      icon: {
        type: String,
        default: 'fas fa-tools'
      },
      to: {
        type: String,
        required: true
      },
      status: {
        type: String,
        default: 'stable' // stable, beta, new
      }
    },
    computed: {
      statusText() {
        const statusMap = {
          stable: '稳定版',
          beta: 'Beta',
          new: '新功能'
        }
        return statusMap[this.status]
      }
    }
  }
  </script>
  
  <style scoped>
  .tool-card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 12px;
  }
  
  .tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
  }
  
  .tool-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 16px;
  }
  
  .tool-info {
    flex: 1;
    min-width: 0;
  }
  
  .tool-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
  }
  
  .tool-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .tool-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 16px;
  }
  
  .tool-status {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
  }
  
  .tool-status.stable {
    background: var(--success-light);
    color: var(--success-color);
  }
  
  .tool-status.beta {
    background: var(--warning-light);
    color: var(--warning-color);
  }
  
  .tool-status.new {
    background: var(--primary-light);
    color: var(--primary-color);
  }
  
  .arrow-icon {
    color: var(--text-tertiary);
    font-size: 14px;
  }
  
  /* 暗色模式适配 */
  .dark-mode .tool-card {
    background: var(--bg-dark-secondary);
    border-color: var(--border-dark);
  }
  
  .dark-mode .tool-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  
  .dark-mode .tool-icon {
    background: var(--primary-dark);
  }
  
  .dark-mode .tool-title {
    color: var(--text-dark-primary);
  }
  
  .dark-mode .tool-desc {
    color: var(--text-dark-secondary);
  }
  
  .dark-mode .tool-status.stable {
    background: var(--success-dark);
  }
  
  .dark-mode .tool-status.beta {
    background: var(--warning-dark);
  }
  
  .dark-mode .tool-status.new {
    background: var(--primary-dark);
  }
  
  .dark-mode .arrow-icon {
    color: var(--text-dark-tertiary);
  }
  </style>